<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>驾驶员信息</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <!-- 引入组件库 -->
    <script src="/js/elementui/index.js"></script>
</head>
<body>


<div id="app">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="驾驶员名称">
            <el-input v-model="formInline.driverName" placeholder="输入驾驶员名称"></el-input>
        </el-form-item>
        <el-form-item label="驾驶证号">
            <el-input v-model="formInline.driverLicense" placeholder="输入驾驶证号"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-button type="primary" @click="openDialog" >添加驾驶员</el-button>

    <!--数据表格-->
    <el-table
            :data="logisticDriver"
            style="width: 100%">
        <el-table-column label="驾驶员编号" width="310">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.driverId }}</span>
            </template>
        </el-table-column>
        <el-table-column label="驾驶员姓名" width="110">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.driverName }}</span>
            </template>
        </el-table-column>
        <el-table-column label="驾驶证号" width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.driverLicense }}</span>
            </template>
        </el-table-column>
        <el-table-column label="身份证号" width="225">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.idCard }}</span>
            </template>
        </el-table-column>
        <el-table-column label="性别" width="30">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.driverSex }}</span>
            </template>
        </el-table-column>
        <el-table-column label="联系方式" width="130">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.driverControl }}</span>
            </template>
        </el-table-column>
        <el-table-column label="所属物流公司" width="170">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.logisticsName }}</span>
            </template>
        </el-table-column>
        <el-table-column label="负责车辆" width="130">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.numberPlate }}</span>
            </template>
        </el-table-column>
        <el-table-column label="工龄(年)" width="100">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.driverAge }}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作" width="170">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="loadPage"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>

    <!--增加修改弹出层-->
    <!-- 修改弹窗 -->
    <el-dialog title="驾驶员信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="人员姓名：" :label-width="formLabelWidth">
                <el-input v-model="form.driverName" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="身份证号：" :label-width="formLabelWidth">
                <el-input v-model="form.idCard" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="驾驶证号：" :label-width="formLabelWidth">
                <el-input v-model="form.driverLicense" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="联系方式：" :label-width="formLabelWidth">
                <el-input v-model="form.driverControl" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <el-form :model="form">
            <el-form-item label="物流公司:">
                <el-select v-model="form.logisticsId" placeholder="请选择">
                    <el-option
                            v-for="item in logistics"
                            :label="item.logisticsName"
                            :value="item.logisticsId">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <el-form :model="form">
            <el-form-item label="负责车辆:">
                <el-select v-model="form.vehicleId" placeholder="请选择">
                    <el-option
                            v-for="item in vehicles"
                            :label="item.numberPlate"
                            :value="item.vehicleId">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <el-form :model="form">
            <el-form-item label="性别:">
                <el-select v-model="form.driverSex" placeholder="请选择">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>


        </el-form>


        <el-form :model="form">
            <el-form-item label="工作年限：" :label-width="formLabelWidth">
                <el-input v-model="form.driverAge" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <el-form :model="form">
            <el-form-item label="备注：" :label-width="formLabelWidth">
                <el-input type="textarea"  v-model="form.remarks" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelDialog">取 消</el-button>
            <el-button type="primary" @click="saveDialog" >确 定</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script>

    // new Vue({
    //     el:"#likeFind",
    //     data(){
    //         return{
    //             formInline: {
    //                 driverName: '',
    //                 driverLicense: '',
    //             },
    //             dialogTableVisible :false,
    //             gridData:{
    //                 driverId:"",
    //                 driverName: "",
    //                 idCard: "",
    //                 driverLicense: "",
    //                 driverSex:"",
    //                 driverControl: "",
    //                 logisticsName: "",
    //                 numberPlate: "",
    //                 driverAge: "",
    //             },
    //             formLabelWidth: '300px'
    //         }
    //     },
    //     methods:{
    //         onSubmit() {
    //             this.driverName=this.formInline.driverName;
    //             this.driverLicense=this.formInline.driverLicense;
    //             axios.get("/likeFindDriver?driverName="+this.driverName+"&driverLicense="+this.driverLicense).then(value => {
    //                 this.gridData=value.data.data
    //                 this.dialogTableVisible = true;
    //
    //             })
    //         }
    //     }
    //
    //
    // })
    //


    new Vue({
        el: "#app",
        data(){
            return{
                //---分页
                current:1,//当前页数
                total:0, //总条数
                pageSize:10 ,//每页条数
                logisticDriver:null,//数据信息
                formInline: {
                    driverName: '',
                    driverLicense: '',
                },
                dialogFormVisible: false,
                form:{
                    driverName: "",
                    idCard: "",
                    driverLicense: "",
                    driverControl: "",
                    logisticsId: "",
                    vehicleId: "",
                    driverAge: "",
                    remarks: "",
                },
                formLabelWidth: '120px',
                //下拉框
                logistics:{
                    logisticsId: "",
                    logisticsName: "",
                },
                vehicles:{
                    numberPlate:"",
                    vehicleId:"",
                }
            }
        },
        mounted(){
            this.loadPage(1);
        },
        methods:{
            handleEdit(index, row) {
                this.form = row;
                this.optionShow();
                this.dialogFormVisible = true;
            },
            onSubmit() {
                this.loadPage(1);
            },
            handleDelete(index, row) {
                this.deleteDriver(row.driverId);
            },
            //跳转当前页
            loadPage(current) {
                this.driverName=this.formInline.driverName;
                this.driverLicense=this.formInline.driverLicense;
                this.current = current;
                //查询
                axios.get("/drivers?current="+current+"&driverName="+this.driverName+"&driverLicense="+this.driverLicense).then(value => {
                    this.logisticDriver = value.data.data.records;
                    this.total = value.data.data.total;
                    this.pageSize=value.data.data.size;
                    this.current=value.data.data.current;
                })
            },
            // 清空弹窗内容
            clearDialog(){
                this.form={
                    driverId: "",
                    driverName: "",
                    idCard: "",
                    driverLicense: "",
                    driverControl: "",
                    logisticsId: "",
                    vehicleId: "",
                    driverAge: "",
                    remarks: "",
                }
            },
            //打开弹窗
            openDialog(){
                this.clearDialog();
                this.optionShow();
                this.dialogFormVisible = true;
            },
            //下拉框
            optionShow(){
                //为物流公司下拉框填充内容
                axios.get("/logisticsNames").then(value => {
                    this.logistics=value.data.data;
                })
                //为负责车辆下拉框填充内容
                axios.get("/vehiclesNames").then(value => {
                    this.vehicles=value.data.data;
                })
            },
            // 弹窗取消按钮
            cancelDialog(){
                this.loadPage(this.current);
                this.clearDialog();
                this.dialogFormVisible = false;
            },
            //弹窗提交方法
            saveDialog() {
                if (this.form.driverId == "") {
                //增加
                axios.post("/driver",this.form
                ).then(value => {
                    if (value.data.code == 1) {
                        this.loadPage(this.current);
                    }
                });
                } else {
                    //修改
                    axios.put("/driver",this.form
                    ).then(value => {
                        if (value.data.code == 1) {
                            this.loadPage(this.current);
                        }
                    })
                }

                this.clearDialog();
                this.dialogFormVisible = false;
            },
            //删除
            deleteDriver(id) {
                this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/driver/" + id
                    ).then(value => {
                        if (value.data.code == 1) {
                            this.loadPage(1);
                        }
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    })

</script>
</html>